


<#include "layout/template.ftl"/>
<@htmlHead title="抽奖活动列表">
<#-- page specific plugin styles -->
<#-- page specific plugin styles -->
<link rel="stylesheet" href="${resources}/assets/css/jquery-ui.css" />
<!-- <link rel="stylesheet" href="${resources}/assets/css/datepicker.css" /> -->
<link rel="stylesheet" href="${resources}/assets/css/ui.jqgrid.css" />
<link rel="stylesheet" href="${resources}/plugins/jqgrid/4.6/jqgrid.extend.css" />
<link  rel="stylesheet" href="${resources}/assets/css/imgUploadCom.css" >
<link type="text/css" rel="stylesheet" href="${resources}/plugins/jedate/skin/jedate.css"> 
<style>
#grid-table td{
	text-align:center;
	
}
#fields-table thead th{
 	text-align: center;
}
</style>
</@htmlHead>
<@htmlBody 'lottery' 'lotteryManage'>
   <#-- start 头部显示当前位置 -->
	<#include "layout/breadcrumbs.ftl">
	<@breadcrumbs '抽奖活动管理' '创建抽奖活动'></@breadcrumbs>
   <#-- end 头部显示当前位置 -->
   <#-- start 主体部分 -->
   	<div class="page-content">
   		<#-- start 标题-->
		<div class="page-header">
			<h1>
				<i class="fa fa-trophy"></i>&nbsp;创建抽奖活动
			</h1>
		</div>
		<#--end标题  -->
		<#-- start 创建活动 -->
		<#-- start上传图片的路径-->
		<input id="uppath" type="hidden" value="${path}/upload/pic">
		<#-- end 上传图片的路径-->
		<div class="row">	
			<div class="col-md-6 col-md-offset-3">
				<form class="form-horizontal"  id="createLottery" action="${path}/manage/lottery/upcreate" method="post" >
					<#--start 温馨提示 -->
					<div class="form-group">
						<div class="col-md-12">
							<div class="clearfix">
								<p style="background-color:#BFE2FD;" class="form-control">温馨提示: 同一时间只能开启一个抽奖活动， 已启用的抽奖活动可以停用，停用后在列表中可以删除此活动。</p>
							</div>
						</div>
					</div>
					<#--end 温馨提示 -->
					<#-- start 活动基本信息 -->
					<div style="border: solid 1px #F6E9F2;background-color:#F6E9F2;" class="col-md-12">
						<div class="form-group" style="margin-top: 5px;">
	 						<label class="control-label col-md-2 no-padding-right" for="name">活动名称:</label>
							<div class="col-md-3">
								<div class="clearfix">
									<input class="form-control"  type="text" name="name" id="name">
								</div>
							</div>
							<label class="control-label col-md-2 no-padding-right" for="name">抽奖类型:</label>
							<div class="col-md-3">
								<div class="clearfix">
									<select id="activitytype" disabled="disabled" name="type" class="form-control">
										<option value="">请选择活动类型</option>
										<#list typeList as type>
											<option  <#if type.value==1>selected="selected"</#if> value="${type.value}">${type.comment}</option>
										</#list>
									</select>
								</div>
							</div>
						</div>
						
						
						<div class="form-group" style="margin-top: 5px;">
	 						<label class="control-label col-md-2 no-padding-right" for="name">开始时间:</label>
							<div class="col-md-3">
								<div class="clearfix">
									<input readonly="readonly" class="form-control" type="text" name="startTime" id="startTime">
								</div>
							</div>
							<label class="control-label col-md-2 no-padding-right" for="name">结束时间:</label>
							<div class="col-md-3">
								<div class="clearfix">
									<input readonly="readonly" class="form-control"  type="text" name="endTime" id="endTime">
								</div>
							</div>
						</div>
						<div class="form-group" style="margin-top: 5px;">
	 						<label class="control-label col-md-2 no-padding-right" for="name">活动状态:</label>
							<div class="col-md-3">
								<div class="clearfix">
								 	<select name="status" class="form-control">
								 		<option value="">请选择活动状态</option>
								 		<#list statusList as status>
								 			<#if status.value!=0>
								 				<option value="${status.value}">${status.comment}</option>
								 			</#if>
								 		</#list>
								 	</select>
								</div>
							</div>
	 						<label class="control-label col-md-2 no-padding-right" for="name">消费满多少抽奖:</label>
							<div class="col-md-3">
								<div class="clearfix">
								 	<input class="form-control"  type="text" name="score" id=""score"">
								</div>
							</div>
						</div>
					<!-- 	<div class="form-group" style="margin-top: 5px;">
	 						<label class="control-label col-md-2 no-padding-right" for="name">活动用途:</label>
							<div class="col-md-8">
								<div class="clearfix">
										<select name="scoretype" class="form-control">
								 		<option value="">请选择活动用途</option>
								 		<#list scoretypeList as status>
								 				<option value="${status.value}">${status.comment}</option>
								 		</#list>
								 	</select>
								</div>
							</div>
						</div> -->
						<!-- <div class="form-group" style="margin-top: 5px;">
							<input type="hidden" id="picurl" value="" name="picurl">
	 						<label class="control-label col-md-2 no-padding-right" for="name">活动图片:</label>
							<div class="col-md-8">
								<div class="clearfix">
								<label class="ace-file-input">
									<input class="form-control" type="file" id="id-input-file"  multiple="" name="file"  onchange="addPic(this)" >
								  	<span id="uploadbutton"  class="ace-file-container"  data-title="上传">
									<span  class="ace-file-name"><p id="filename">点击这里上传文件</p><i class=" ace-icon fa fa-upload"></i></span>
									</span>
									<a class="remove" href="#"><i class=" ace-icon fa fa-times"></i></a>
								</label>
								</div>
							</div>
						</div> -->
						<div class="form-group" style="margin-top: 5px;">
	 						<label class="control-label col-md-2 no-padding-right" for="name">备注:</label>
							<div class="col-md-8">
								<div class="clearfix">
									<textarea style="resize: none;" name="remark" class="form-control" rows="4" cols=""></textarea>
								</div>
							</div>
						</div>
					</div>
					<#-- end 活动基本信息 -->
					<div class="form-group"></div>
					<#--start title -->
					<div id="info" class="form-group" style="margin-top: 20px;">
						<div class="col-md-12">
							<div class="clearfix">
								<p style="background-color:#BFE2FD;" class="form-control">奖品信息 &nbsp; &nbsp; &nbsp;
								<span style="color: red;">注:所有商品概率总和不得大于百分百,单个商品概率必须大于0</span>
								</p>
							</div>
						</div>
					</div>
					<#--start title -->
					<#--start 奖品信息 -->
					<#--<#list statusList as le>-->
						<div id="probability" style="border: solid 1px #F6E9F2;background-color:#F6E9F2;" class="col-md-12">
						  	<table   id="fields-table" style="text-align: center;" class="table table-striped table-bordered table-hover">
				  				  <thead style="text-align: center;">
									  <th>奖品等级</th>
									  <th>奖品类型</th>
					 				  <th>奖品名称</th>
						 			  <th>奖品数量</th>
						 			  <th>话费金额</th>
						 			  <th>中奖概率</th>
								  </thead>
					  			  <tr id="tr0">
					  			  	<td  style="text-align: center;line-height:normal; font-weight: bold;"><input type="hidden" name="prizeList[0].level"  value="0">一等奖</td>
					  	            <td>
					  	 			  <select id="type0" name="prizeList[0].type" onchange="tscore(0)">
					  	  				<#list prizetypeList  as type>
					  						<option  <#if type.value==1> selected="selected"</#if> value="${type.value}">${type.comment}</option>
					  					</#list>
				  					  </select> 
				  					 <!-- <select disabled="disabled" id="type0" name="prizeList[0].type" onchange="tscore(0)">
					  						<option   value="1"></option>
				  					  </select>  -->
					  				</td>
					  				<td><input style="width: 80px;" name="prizeList[0].name" type="text" placeholder="输入名称"></td>
					  				<td ><input style="width: 65px;" name="prizeList[0].maxsum" type="text" id="redpacknum0" placeholder="输入数量"></td>
					  				<td><input id="pscore0"  style="width: 65px;" name="prizeList[0].score" type="text" placeholder="输入金额"></td>
					  				<td><input  style="width: 65px;" class="probability" name="prizeList[0].probability" type="text" placeholder="输入概率"></td>
							 	 </tr>
								 <tfoot>
					  				<tr>
					  					<td colspan="6"><a onclick="onadd()">继续添加</a></td>
					  				</tr>
					 			 </tfoot>
							</table>					
						</div>
				</div>
					<#--end 奖品信息-->
				
				</form>
			<!-- 提交开始 -->
                   <div class="form-group">
                   	<div class="col-md-12 center">
                    	<button id="form-submit" type="button" onclick="mysubmit('createLottery')"  class="btn btn-primary">
							<i class="fa fa-save align-top bigger-125"></i>保存
						</button>
						<button type="reset" class="btn">
							<i class="fa fa-pencil align-top bigger-125"></i>重置
						</button>
					</div>					
                 		</div>
				<!-- 提交结束  -->
			</div>
		</div>
		<#-- end 创建活动 -->
	</div>
   <#-- end 主体部分 -->		
</@htmlBody>
<@htmlBodyScript>
<#--tabs-->
<#-- 日期控件-->
	<!-- <script src="${resources}/plugins/bootstrap-datetimepicker/2.3.4/js/bootstrap-datetimepicker.js"></script>
  	<script src="${resources}/plugins/bootstrap-datetimepicker/2.3.4/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
 -->
 <script>
	/* $("#startTime,#endTime").datetimepicker({
		bootcssVer:3,
	    format: "yyyy-mm-dd",
	    language:"zh-CN",
		weekStart: 1,
       	todayBtn:  1,
		autoclose: 1,
		todayHighlight: 1,
		startView: 2,
		minView: 2,
		forceParse: 0
	}); */
	//提交表单
 	function mysubmit(form){
 		$("#activitytype").removeAttr("disabled");
 		var probabilitys = $(".probability");
 		var f = true;
 		probabilitys.each(function(){
 			if($(this).val()==0){
 				f = false;
 			}
 		});
 		if(!f){
 			$("#probability").append("<p id='probabilityerr' style='color:red;'>单个商品的中奖概率必须大于0</p>");
 			return false;
 		}
 		/**验证所有百分比是否大于100*/
 		var probability = 0
 		$.each($(".probability"), function(){  
 			probability =parseInt($(this).val());  
 			
 		}); 
 		if(probability>100){
 			$("#probability").append("<p id='probabilityerr' style='color:red;'>所有奖品概率总和不得大于100</p>")
 			return false;
 		}
 		
 		else{
 			$("#probabilityerr").remove();
	 		$("#"+form).submit();
 		}
 	}
	//选择奖品为积分时，才能编辑积分
	function change(){
		var type=$("#prizetype").val();
		if(type==2){
			$("#score").attr("disabled",false);
		}else{
			$("#score").attr("disabled",true);
		}
	}
</script>

<!-- <script type="text/javascript" src="${resources}/assets/js/jquery.js"></script> -->
<script type="text/javascript" src="${resources}/assets/js/lotteryCreate.js"></script>
<script type="text/javascript" src="${resources}/assets/js/ajaxfileupload.js"></script>
<script type="text/javascript" src="${resources}/assets/js/common.js"></script>
<script type="text/javascript">
var num = 1;
function onadd(){
	if(num==4){
		common.alert({
			title:"系统提示",
			width:"300px",
			content:'<p style="padding: 20px 0">最多只能添加四个奖品</p>'	
		});
		return;
	}
	var level  = change(num);
  /*html ='<tr id="'+num+'"><td  style="text-align: center;line-height:normal; font-weight: bold;"><input type="hidden" name="prizeList['+num+'].level"  value="'+num+'">'+level+'等奖</td>';
  	html +='<td><select id="type'+num+'" onchange="tscore('+num+')" name="prizeList['+num+'].type"><#list prizetypeList  as type><option value="${type.value}">';
	html +='${type.comment}</option></#list></select></td>';
	html +='<td><input style="width: 80px;" name="prizeList['+num+'].name" type="text" placeholder="输入名称"></td>';
	html +='<td ><input style="width: 60px;" name="prizeList['+num+'].maxsum" id="redpacknum'+num+'" type="text" placeholder="输入数量"></td>';
	html +='<td><input id="pscore'+num+'" disabled="disabled" style="width: 60px;" name="prizeList['+num+'].score" type="text" placeholder="输入积分"></td>';
	html +='<td><input  style="width: 65px;" name="prizeList['+num+'].probability" type="text" placeholder="输入概率"></td>';
  	$("#fields-table").append(html); */
  	html ='<tr id="'+num+'"><td  style="text-align: center;line-height:normal; font-weight: bold;"><input type="hidden" name="prizeList['+num+'].level"  value="'+num+'">'+level+'等奖</td>';
  	html +='<td><select id="type'+num+'" onchange="tscore('+num+')" name="prizeList['+num+'].type"><#list prizetypeList  as type><option value="${type.value}">';
	html +='${type.comment}</option></#list></select></td>';
	html +='<td><input style="width: 80px;" name="prizeList['+num+'].name" type="text" placeholder="输入名称"></td>';
	html +='<td ><input style="width: 60px;" name="prizeList['+num+'].maxsum" id="redpacknum'+num+'" type="text" placeholder="输入数量"></td>';
	html +='<td><input id="pscore'+num+'" style="width: 60px;" name="prizeList['+num+'].score" type="text" placeholder="输入金额"></td>';
	html +='<td><input  style="width: 65px;" class="probability" name="prizeList['+num+'].probability" type="text" placeholder="输入概率"></td>';
  	$("#fields-table").append(html);
  	num++;
}
//点击清空自定义字段信息
function clearField(obj){
	var tr = "tr"+$(obj).attr('data');
	console.log(tr);
	$('#'+ tr).remove();
}

function change(num){
	var level = "";
	switch(num){
		case 0:
		level="一";
			break;
		case 1:
			level = "二";
			break;
		case 2:
			level = "三";
			break;
		case 3:
			level = "四";
			break;
		case 4:
			level = "五";
			break;
		case 5:
			level = "六";
			break;
		case 6:
			level = "七";
			break;
		case 7:
			level = "八";
			break;
		case 8:
			level = "九";
			break;
	}
	return level;
}

 function tscore(num){
	if($("#type"+num).val()==2){
		$("#pscore"+num).attr("disabled",true);
	}else {
		$("#pscore"+num).attr("disabled",false);
	}
} 
</script>

<!--验证框架-->
<script src="${resources}/plugins/jquery-validation/jquery.validate.min.js"></script>
<script src="${resources}/plugins/jquery-validation/messages_zh.min.js"></script>
<script type="text/javascript">
var msg = "";
$.validator.addMethod('checkTime',function(value,element,params){
	 var startTime = $("#startTime").val();
	 var endTime = $("#endTime").val();
	 alert(startTime);
	 if(startTime==""){
		 msg = "*请选择活动开始时间";
		 return false;
		 
	 }else{
		 return true;
	 }
	},msg);
	$('#createLottery').validate({
			errorElement: 'div',
			errorClass: "help-block",
			focusInvalid: false,
			rules: {
				name: {
					required:true,
					maxlength:30
				},
				type:{
					required:true,
					maxlength:50
				},
				startTime:{
					required:true
				},
				endTime:{
					required:true
				},
				status:{
					required:true
				},
				score:{
					required:true
				}
				
			},
			messages: {
				name:{  
          			required:'*请输入活动名称',  
           			maxlength:'*标题最大的长度为30'
        		},
        		type:{
        			required:'*请选择活动类型'
        		},
        		startTime:{
        			required:'*选择开始时间'
				},
				endTime:{
        			required:'*选择结束时间'
				},
				status:{
					required:'请选择活动状态'
				},
				score:{
					required:'*请输入金额'
				}
			},
			highlight: function (e) {
				$(e).closest('.form-group').removeClass('has-info').addClass('has-error');
			},
			success: function (e) {
				$(e).closest('.form-group').removeClass('has-error');
				$(e).remove();
			},
			errorPlacement: function (error, element) {
				error.insertAfter(element.parent());
			},
			submitHandler: function (form) {
				form.submit();
			},
			invalidHandler: function (form) {
			}
	});
</script>

  <script type="text/javascript" src="${resources}/plugins/jedate/jedate.js"></script> 
	<script>
		var start = {
		    dateCell: '#startTime',
		    format: 'YYYY-MM-DD hh:mm:ss',
		    minDate: jeDate.now(0), //设定最小日期为当前日期
		    festival:true,
		    ishmsVal:false,
		    maxDate: '2099-06-30 23:59:59', //最大日期
		    choosefun: function(elem,datas){
        	end.minDate = datas; //开始日选好后，重置结束日的最小日期
    		}
		};
		var end = {
		    dateCell: '#endTime',
		    format: 'YYYY-MM-DD hh:mm:ss',
		    minDate: jeDate.now(0), //设定最小日期为当前日期
		    festival:true,
		    maxDate: '2099-06-16 23:59:59', //最大日期
		    choosefun: function(elem,datas){
		        start.maxDate = datas; //将结束日的初始值设定为开始日的最大日期
		    }
		};
		jeDate(start);
		jeDate(end);
	</script>
</@htmlBodyScript>